<!--学籍异动信息管理-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
        <div class="search-container-item right87">
          <div class="item-name">查询条件：</div>
          <el-select v-model="searchValue" placeholder="请选择" style="width: 110px" size="mini" @change="choseSearch">
            <el-option v-for="item in searchList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right87" v-if="searchValue == 1">
          <span class="item-name">异动日期：</span>
          <el-date-picker class="time" v-model="dataForm.changeDateStart" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
          <span>-</span>
          <el-date-picker class="time" v-model="dataForm.changeDateEnd" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
        </div>
      <div class="search-container-item right87" v-if="searchValue == 1">
        <div class="item-name">异动类型：</div>
        <el-select v-model="dataForm.changeType" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in diffList" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="searchValue == 5">
        <span class="item-name">入学日期：</span>
        <el-date-picker class="time" v-model="dataForm.beginDateStart" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
        <span>-</span>
        <el-date-picker class="time" v-model="dataForm.beginDateStart" type="date"  value-format="yyyy-MM-dd" ></el-date-picker>
      </div>
      <div class="search-container-item right87" v-if="searchValue == 2">
        <div class="item-name">年级：</div>
        <el-select v-model="dataForm.grade" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="searchValue == 3">
        <div class="item-name">专业班次：</div>
        <el-select v-model="dataForm.classId" placeholder="请选择" style="width: 110px" size="mini">
          <el-option v-for="item in zybc" :key="item.className" :label="item.className" :value="item.className"></el-option>
        </el-select>
      </div>
      <div class="search-container-item right87" v-if="searchValue == 4">
        <div class="item-name">学号：</div>
        <el-input class="inputWidth" v-model="dataForm.studentCode" size="mini" style="width: 110px"></el-input>
      </div>
      <div class="search-container-item right87" v-if="searchValue == 4">
        <div class="item-name">姓名：</div>
        <el-input class="inputWidth" v-model="dataForm.studentName" size="mini" style="width: 110px"></el-input>
      </div>
      <div class="search-button color-primary width70" @click="initList">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span>查询</span>
      </div>
      <div class="search-button color-yellow width120" @click="jumpPage">
        <img src="../../../assets/assessment/right-icon.png" alt="" />
        <span>添加异动处理</span>
      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" border style="width: 100%" class="table-data">
        <el-table-column prop="courseName" label="操作" align="center" width="300">
          <div class="flex" slot-scope="scope">
            <span class="small-btn color-primary right22" @click="edit(scope.row.id,1)">
              <img src="../../../assets/assessment/icon-search.png"> 查看
            </span>
            <span class="small-btn edit-green right22" @click="edit(scope.row.id,2)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png"> 修改
            </span>
            <span class="small-btn delete-red" @click="delInfo(scope.row.id)">
              <img src="../../../assets/assessment/icon-delete.png"> 删除
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="studentCode" label="学号" align="center"></el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center" width="140">
          <span class="editName" slot-scope="scope">
              {{scope.row.studentName}}<img @click="jumpBasic(scope.row.studentCode)" src="../../../assets/assessment/icon-plan-record-detail.png">
          </span>
        </el-table-column>
        <el-table-column prop="studentDuiShow" label="异动后学员队" align="center"></el-table-column>
        <el-table-column prop="specialty" label="异动后专业" align="center"></el-table-column>
        <el-table-column prop="className" label="异动后专业班次" align="center"></el-table-column>
        <el-table-column prop="changeTypeShow" label="异动类型" align="center" width="140"></el-table-column>
        <el-table-column prop="changedate" label="异动时间" align="center" ></el-table-column>
        <el-table-column prop="reason" label="异动原因" align="center"></el-table-column>
        
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
    <div class="pagination-block">
      <el-pagination v-if="total>50" @current-change="currentPage" prev-text="上一页" next-text="下一页" 
        :page-size="50" layout="prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {studentStatusDiffList,studentStatusDiffDel} from "@/api/student";
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      total:1,
      dataForm:{
        pageNo:1,
        pageSize:50,
        changeDateStart:'',
        changeDateEnd:'',//异动日期
        changeType:'',//异动类型
        beginDateStart:'',
        beginDateEnd:'',//入学日期
        grade:'',//年级
        classId:'',//专业班次
        studentCode:'',
        studentName:'',
      },
      searchList:[
        {label:'按异动时间',value:1},
        {label:'按年级',value:2},
        {label:'按专业班次',value:3},
        {label:'按学员',value:4},
        {label:'按入学时间',value:5}
      ],
      searchValue:1,
      gradeList:[],//年级
      zybc:[],//专业班次
      xq: "2020春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2020夏",
          label: "2020夏",
        },
      ],
      diffList:[],
      date: "",
      tableData: [
        {
          id: "1",
          system: "期中",
          researchOffice: "室一",
          cultivationLevel: "培养层次一",
          practicetype: "选修",
          courseNumber: "212534567",
          courseName: "培养层次一",
        }
      ],
    };
  },
  mounted(){
    this.initList();
    this.getYear();
    //异动列表
    this.commonApi.getCommonData({code:'CHANGE_TYPE'}).then(res=>{
      this.diffList = res.data
    })
  },
  methods: {
    //导出excel
    importExcel(){
      Axios({
        method: 'get',
        url: this.$store.state.studentUrl.baseUrl+'/xyChangeInfo/exportData',
        params:this.dataForm,
        headers: {'Content-Type': 'application/octet-stream' },
            responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '学籍异动数据.xlsx');
      });  
    },
    // 当前页
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    //改变查询条件
    choseSearch(e){
      if(e == 1){
        this.dataForm.beginDateStart = '';
        this.dataForm.beginDateEnd = '';
        this.dataForm.grade = '';
        this.dataForm.classId = '';
        this.dataForm.studentCode = '';
        this.dataForm.studentName = '';
      }else if(e == 2){
        this.dataForm.beginDateStart = '';
        this.dataForm.beginDateEnd = '';
         this.dataForm.changeDateEnd = '';
        this.dataForm.changeDateStart = '';
        this.dataForm.classId = '';
        this.dataForm.studentCode = '';
        this.dataForm.studentName = '';
        this.dataForm.changeType = ''
      }else if(e == 3){
        //专业
        this.commonApi.getZybc().then(res=>{
          this.zybc = res.data
        })
        this.dataForm.beginDateStart = '';
        this.dataForm.beginDateEnd = '';
        this.dataForm.changeDateEnd = '';
        this.dataForm.changeDateStart = '';
        this.dataForm.studentCode = '';
        this.dataForm.studentName = '';
        this.dataForm.changeType = '';
        this.dataForm.grade = '';
      }else if(e == 4){
        this.dataForm.beginDateStart = '';
        this.dataForm.beginDateEnd = '';
        this.dataForm.changeDateEnd = '';
        this.dataForm.changeDateStart = '';
        this.dataForm.changeType = '';
        this.dataForm.grade = '';
        this.dataForm.classId = '';
      }else if(e == 5){
        this.dataForm.changeDateEnd = '';
        this.dataForm.changeDateStart = '';
        this.dataForm.changeType = '';
        this.dataForm.grade = '';
        this.dataForm.classId = '';
        this.dataForm.studentCode = '';
        this.dataForm.studentName = '';
      }
    },  
    //初始化数据
    async initList(){
      let res = await studentStatusDiffList(this.dataForm);
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    //年级
    getYear(){
      let current = new Date().getFullYear();
      let dateData = [];//获取年级
      for(let i=0;i<5;i++){
        dateData.push({
          label:(current - i)+'',
          value:(current - i)+''
        })
      }
      this.gradeList = dateData;
    },
    //跳转学员信息详情
    jumpBasic(studentCode){
      this.$router.push({
        path:'/student/studentStatus/infoSearch',
        query:{
          studentCode:studentCode
        }
      })
    },
    delInfo(id){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await studentStatusDiffDel({ids:id});
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.search()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }); 
      });
    },
    
    //编辑
    edit(id,type){
      //type:1：查看；2：修改
      this.$router.push({
          path:'/student/studentStatusDiff/edit',
          query:{
            id:id,
            type:type
          }
      })
    },
    //添加异动处理
    jumpPage(){
      this.$router.push({path:'/student/studentStatusDiff/add'})
    }
  },
};
</script>
<style lang="less" scoped>
.table-css {
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,.el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  /deep/.el-table__body tr,.el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: flex-start !important;
  position: relative;
}
  .time{
      /deep/.el-input__inner{
          height: 28px;
          line-height: 28px;
          font-size: 12px;
      }
      /deep/.el-input__icon{
          font-size: 20px;
          margin-top: -4px;
      }
      /deep/.el-input__prefix{
          right: 16px;
      }
  }
.right87{margin-right: 30px;}
.width70{width: 70px;}
.width120{width: 120px;}
.right22{margin-right: 14px;}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    position: absolute;
    right: 0;
    >span{color: #F86900;}
}
.flex{
  display: flex;
  justify-content: center;
}
.edit-green{
  color: #02C86C;
  background: #F1FFF8;
  border: 1px solid #02C86C;
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
</style>
